<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <title>包装</title>
    <style type="text/css">
        html, body { 
        margin:0 auto;
        width: 100vw; 
        height: 100vh; 
        position: relative; 
        } 
        
        .main {
        width: 100%; 
        height: 100%;  
        position: absolute;  
        background-image: url("../assets/img/ground.jpg"); 
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center;
        overflow: hidden;
        }

        .slider {
            width:760px;
            height: 500px;
            box-shadow: 10px -10px 10px 5px #541e24;
            background-color:rgb(94,97,109);
            opacity:90%;
            position:relative;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);

        }

        .slide {
            width: 650px;
            height: 429px;
            border:2px solid #000;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            background-size:650px 429px;
            background-position: center;
            animation: slideShow 15s  ease-in-out infinite;}

        @keyframes slideShow {  
        0% {background-image: url('../assets/img/首图.png');}
        10%{ background-image: url('../assets/img/首图.png');}
        20%{ background-image: url('../assets/img/首图.png');}

        30%{ background-image: url('../assets/img/一拧.png');}  

        40% { background-image: url('../assets/img/二套.png');}

        50% { background-image: url('../assets/img/三打结2.png');}
 
        60% { background-image: url('../assets/img/五穿3.png');}

        70% { background-image: url('../assets/img/六拉紧.png');}

        80% { background-image: url('../assets/img/七拴.png');} 
            
        90% { background-image: url('../assets/img/八叠2.png');}

        100% { background-image: url('../assets/img/十对位4.png');}       
       
    </style>
</head>
<body>
    <div class="main">
    <div class="slider">
        <div class="slide"></div>
    </div>
</div>
    

</body><chatgpt-sidebar data-gpts-theme="light"></chatgpt-sidebar><chatgpt-sidebar-popups data-gpts-theme="light"></chatgpt-sidebar-popups></html>